<template>
  <!-- 弹窗 -->
  <el-dialog
    title="题目预览"
    :visible.sync="showDialog"
    width="990px"
    :before-close="beforeClose"
  >
    <div>
      <el-row>
        <el-col :span="6">【题型】:{{ row.questionType }}</el-col>
        <el-col :span="6">【编号】:{{ row.id }}</el-col>
        <el-col :span="6">【难度】:{{ row.difficulty }}</el-col>
        <el-col :span="6">【标签】:{{ row.tags }}</el-col>
        <el-col :span="6">【学科】:{{ row.subjectName }}</el-col>
        <el-col :span="6">【目录】:{{ row.catalog }}</el-col>
        <el-col :span="6">【方向】:{{ row.direction }}</el-col>
      </el-row>
      <hr />
      【题干】：<span
        v-html="row.question"
        style="color: blue; font-size: 16px"
      ></span>
      <div>
        <p style="padding-bottom: 5px; font-size: 16px">
          {{ row.questionType }}题 选项：（以下选中的选项为正确答案）
        </p>
      </div>

      <el-radio-group
        v-model="row.right"
        v-if="row.questionType === '单选'"
        style="display: flex; flex-direction: column"
      >
        <el-radio
          style="padding: 8px 0"
          v-for="item in row.options"
          :key="item.id"
          :label="item.id"
          >{{ item.title }}</el-radio
        >
      </el-radio-group>

      <el-checkbox-group
        v-model="row.right"
        v-else
        style="display: flex; flex-direction: column"
      >
        <div v-for="item in row.options" :key="item.id">
          <el-checkbox
            style="padding: 8px 0"
            :label="item.id"
            v-show="item.title === ''"
            ></el-checkbox
          ><span>{{ item.title }}</span>
        </div>
      </el-checkbox-group>
      <hr />
      【参考答案】：
      <el-button type="danger" @click="$emit('clickVideo')"
        >视频答案预览</el-button
      >
      <div v-if="showVideo" class="videoBox">
        <video controls src="row.videoURL"></video>
      </div>
      <hr />
      【答案解析】：
      <div style="display: inline-block" v-html="row.answer"></div>
      <hr />
      【题目备注】：
      <div style="display: inline-block" v-html="row.remarks"></div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="$emit('close')">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    showDialog: {
      type: Boolean,
      required: true,
    },
    showVideo: {
      type: Boolean,
      required: true,
    },
    row: {
      type: Object,
    },
  },
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {
    beforeClose() {
      this.$emit('close');
    },
  },
};
</script>

<style scoped lang="scss">
.el-dialog {
  .el-row {
    ::v-deep .el-col {
      padding: 10px 0;
    }
  }
  .videoBox {
    width: 440px;
    height: 340px;
    video {
      width: 100%;
      height: 100%;
    }
  }
  .dialog-footer {
    text-align: right;
  }
}
</style>
